<template>
    <div class="containe"> 
        <h3>姓名：{{person.name}}</h3>
        <h3>年龄：{{person.age}}</h3>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看电话</button>
    </div>
    <div > 
        <h3>{{b}}</h3>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.name}}--{{item.age}}
            </li>
        </ul>
    </div>
</template> 

<script lang="ts" setup> 
//import { defineProps } from 'vue'  //definexxx是宏函数可不用引入
import { ref,defineExpose,defineProps,withDefaults } from 'vue'

let person = ref({
    name: "张三",
    age: 18,
    tel:  "12345678901"
})

function showTel() {
    alert(person.value.tel)
}

function changeName(){
    person.value.name = "张三丰"
}
const changeAge= ()=>{
    person.value.age +=1
}
/*******************defineExpose***********************/
let a = ref(12)
//将数据传给父组件 Demo5.vue
defineExpose({person,a})

/*********************defineProps**************************/
//接收从父组件上接收传过来的数据Demo6.vue
/*
//1.只接收
defineProps(['list'])
*/

//2.接收并保存
/* let x = defineProps(['b','list'])
console.log(x.b,x.list) */

import {type PersonLists} from '../../types'
//3.接收+验证（限制类型）
//defineProps<{list: PersonLists}>

//4.接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{list?: PersonLists}>(),{
    list:()=> [{id:4, name:"康师傅", age: 20}]
}) 




</script >
<style scoped>
.containe {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
    margin: 10px;
}
button  { 
    margin: 0 0 5px;
} 
</style>